<template>
  <div class="page">
    <div class="nav-bar">
      <van-icon class="iconfont" class-prefix='iconfont' name='left-24' @click="$router.go(-1)"/>
      <van-search class="van_search" v-model="keyWord" show-action shape="round" placeholder="请输入搜索关键词" autofocus @search="onSearch">
        <div slot="action" class="action_btn" @touchstart="onSearch">搜索</div>
      </van-search>
    </div>
    <div class="search_div" v-show="isSearch">
      <div class="nodata" style="max-height:300px" v-if="searchList.length===0">暂无相关商品</div>
      <van-list v-model="loading" :finished="finished" :finished-text="searchList.length>7?'没有更多了':''" @load="onLoad" :offset="50" :immediate-check="false" v-if="searchList.length>0">
        <template v-for="item in searchList">
          <div class="search_one" @click="goDetails(item.id)" :key="item.id" v-if="item.goods_name">{{item.goods_name}}</div>
          <div class="search_one" @click="goDetails(item.id,'store')" :key="item.id" v-else>{{item.shop_name}}</div>
        </template>
      </van-list>
    </div>
  </div>
</template>
<script>
import mixins from '@/utils/mixins';
export default {
  name: 'index',
  data () {
    return {
      keyWord: '',
      isSearch: false,
      spage: 1,
      slimit: 10,
      searchList: [],
      searchType: this.$route.query.searchType
    };
  },
  mixins: [mixins],
  methods: {
    onSearch() {
      let that = this;
      let options = {};
      options.page = that.spage;
      options.limit = that.slimit;
      console.log(that.searchType);
      if (that.searchType && that.searchType === 'store') { // 搜索门店
        options.store_name = that.keyWord.trim();
        that.$API.store.storeList(options).then(res => {
          if (res.code === 0) {
            that.searchList = res.data;
            that.isSearch = true;
            console.log(res.data);
          }
        });
      } else {
        options.goodsName = that.keyWord.trim();
        that.$API.home.searchKeyWord(options).then(res => {
          if (res.code === 0) {
            that.searchList = res.data;
            that.isSearch = true;
            console.log(res.data);
          }
        });
      }
    },
    goDetails (id, type) {
      if (type) this.$router.push({ 'path': '/store/sdetail', query: { id: id } });
      else this.$router.push({ 'path': '/mall/goods', query: { id: id } });
    }
  }
};
</script>
<style lang="less" scoped>
  .page{
    .iconfont{
      display: flex;
      align-items: center;
      margin:0 20px;
      font-size: 30px;
    }
    .nav-bar{
      display: flex;
      justify-content: space-around;
    }
    .search_div{
      padding:30px;
      .search_one{
        padding:30px 0;
        border-bottom:1px solid #ededed;
        font-size: 25px;
        color: #262626;
      }
    }
    .van_search{
      padding: 0;
      flex: 1;
      margin: 0 20px;
      .action_btn{
        background:linear-gradient(to bottom,#ff9101,#ff5a0c);
        color:#fff;
        border-radius: 60px;
        padding:10px 20px;
      }
      .van-cell{
        padding:5px 30px;
      }
      .van-search__content{
        border: 3px solid #ef5c1b;
      }
    }
  }
</style>
